<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/11/13
  Time: 19:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>取消管理员</title>
    <script src="/WebContent/JQuery/jquery-3.4.1.js" type="text/javascript"></script>
    <style type="text/css" rel="stylesheet">
        body{
            font-family: "楷体";
            font-size: 16px;
        }
        .all{
            width: 1100px;
            max-height: 450px;
            overflow: auto;
            border: 2px solid rgb(97,166,0);
            margin: 0 auto;
            padding: 50px 30px;
            box-sizing: border-box;
        }
        .yheader{
            font-size: 18px;
            font-weight: 600;
            color: rgb(97,166,0);
            margin-bottom: 10px;
        }
        input{
            height: 30px;
            line-height: 30px;
            border: none;
            background: none;
        }
        .username{
            border: 1px solid black;
            box-sizing: border-box;
        }
        .button{
            background: #4aa3d6;
            cursor: pointer;
            width: 50px;
            border-radius: 20px;
            color: #fff;
            font-weight: 600;
        }
        .button:hover{
            background: rgb(97,166,0);
        }
        table{
            width: 800px;
            margin: 0 auto;
            margin-top: 50px;
        }
        td{
            text-align: center;
        }
        .user{
            display: none;
        }
    </style>
</head>
<body>
<article class="all">
    <div class="yheader">当前位置&nbsp;&gt;&gt;&nbsp;查询用户</div>
    <div class="yheader" style="width: 80%;margin: 0 auto;text-align: center;margin-bottom: 30px;">
        <input type="text" class="username" placeholder="请输入要查询的用户名">
        <input type="button" class="button" value="查询" id="btn">
    </div>

    <hr style="border-color: #4aa3d6;">
    <div class="user">
        <table border="1" id="box">

        </table>
    </div>


</article>
<script>
    $(document).ready(function () {
         $(".username").focus(function () {
              $(this).css("border","1px solid rgb(97,166,0)");
         }).blur(function () {
             $(this).css("border","1px solid black");
         })

        //查询
        $("#btn").click(function () {
            var username = $.trim($(".username").val());
             $.ajax({
                 url:"/SuperAdminServlet?type=selectbyuname",
                 data:"username="+username,
                 dataType:"json",
                 type:"get",
                 success:function (data) {
                    collback(data);
                 },
                 error:function (error) {
                     alert("请求失败！");
                 }
             })

            var collback = function (data) {
                if(data.length >0){
                    $("<table border='1' id='box'></table>")
                    $(".user").css("display","block");
                    $("#box").empty();
                    var $tr = $("<tr></tr>");
                    $("<th></th>").html("编号").appendTo($tr);
                    $("<th></th>").html("用户名").appendTo($tr);
                    $("<th></th>").html("出生日期").appendTo($tr);
                    $("<th></th>").html("联系方式").appendTo($tr);
                    $("<th></th>").html("邮箱地址").appendTo($tr);
                    $("<th></th>").html("注册日期").appendTo($tr);
                    $("<th></th>").html("角色类型").appendTo($tr);
                    $tr.appendTo("#box");
                    $.each(data,function (index,item) {
                        var role = item.userRoleType;
                        if(role == 1){
                            role = "VIP用户";
                        }else if(role == 0){
                            role = "普通用户";
                        }
                        var $tr = $("<tr></tr>");
                        $("<td></td>").html(index+1).appendTo($tr);
                        $("<td></td>").html(item.username).appendTo($tr);
                        $("<td></td>").html(item.userBirthday).appendTo($tr);
                        $("<td></td>").html(item.userTel).appendTo($tr);
                        $("<td></td>").html(item.userEmail).appendTo($tr);
                        $("<td></td>").html(item.userRegisterTime).appendTo($tr);
                        $("<td></td>").html(role).appendTo($tr);
                        $tr.appendTo("#box");
                    })
                }else{
                    $(".user").css("display","none");
                    alert("没有查到该用户信息！");
                }
            }
        })
    })
</script>
</body>
</html>
